<template>
    <div class="user">
        <div class="user-header">
            <span class="user-header-icon">
                <img class="full" src="https://m.mi.com/static/img/avatar.76a75b8f17.png">
            </span>
            <span class="login-register" @click="login">登陆/注册</span>
        </div>
        <div class="user-box-order">
            <div class="content-wrapper flex-sb">
                <span class="myorder">我的订单</span>
                <span class="allorder">全部订单</span>
            </div>
            <span class="iconfont icon-allow">&#xe611;</span>
        </div>
        <div class="line"></div>
    
        <div class="user-box-service">
           <div class="service-item">
                <span class="iconfont">&#xe600;</span>
                <p>待付款</p>
            </div>
           <div class="service-item">
                <span class="iconfont">&#xe600;</span>
                <p>待付款</p>
            </div>
           <div class="service-item">
                <span class="iconfont">&#xe600;</span>
                <p>待付款</p>
            </div>
        </div>
         <div class="user-box box-mt">
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <div class="name">
                    会员中心
                    <div class="line"></div>
                </div>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <span class="name">会员中心</span>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
         </div>
       
         <div class="user-box box-mt">
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <div class="name">
                    会员中心
                    <div class="line"></div>
                </div>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <span class="name">会员中心</span>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
         </div>
         <div class="user-box box-mt">
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <div class="name">
                    会员中心
                    <div class="line"></div>
                </div>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
             <div class="user-box-item">
                <span class="iconfont icon-logo">&#xe60e;</span>
                <span class="name">会员中心</span>
                <span class="iconfont icon-allow">&#xe611;</span>
             </div>
         </div>
         
        <router-link to="/user/setting" class="router-link-block">
            <div class="user-box box-mt user-box-setting box-mb">
                <div class="user-box-item">
                    <span class="iconfont icon-logo">&#xe644;</span>
                    <span class="name">设置</span>
                    <span class="iconfont icon-allow">&#xe611;</span>
                </div>
            </div>
        </router-link>
        <Footer></Footer>
    </div>
</template>

<script>

import Footer from '../components/Footer'
import {mapMutations} from 'vuex'
export default {
    name: 'user',
    components:{
        Footer
    },
    mounted() {
        this.switchFooterNav(5);
    },
    methods:{
        login() {
            this.$dialog('<span class="themecolor">《小米商城隐私政策》</span>',()=>{
               this.$router.push('/login');
            });
        },
        ...mapMutations(['switchFooterNav'])
    },
    
}
</script>

<style lang="stylus">
@import '../assets/css/theme.styl';

.user-enter-active
    transition opacity .3s;
.user
    background $bgcolor
    position:absolute;
    width:100%;
    top:0;
    left:0;
    
.user-header
    text-align left;
    width:100%;
    height 90px;
    line-height 90px;
    color: #fff;
    background-color #f37d0f;
    background-image:url(https://m.mi.com/static/img/bg.63c8e19851.png);
    background-position:center 0;
    background-size auto 100%;
    .user-header-icon
        display:inline-block;
        width:49.25px;
        height:49.25px;
        position absolute;
        top:$mg;
        left: $mg;
        border-radius: 100%;
        border: 3px solid hsla(0,0%,100%,.4);
        img
            vertical-align top !important;
    .login-register
        font-size 16px;
        margin-left:85px;

.user-box-order
    background #fff;
    height 46px;
    line-height 46px;
    color rgba(0,0,0,.87); 
    position relative
    overflow hidden
    .allorder
        margin-right 10px;
        font-size 15px;
    .icon-allow
        font-size 24px;
        color #aaa;
        position:absolute;
        top 0;
        right 5px;
        transform rotate(90deg)
        
.user-box-service
    color rgba(0,0,0,.87); 
    background #fff;
    display:flex;
    justify-content space-around;
    align-items center;
    height 97px;
    .service-item
        .iconfont
            font-size 30px;
            color:#aaa;
.user-box
    background #fff;
    color rgba(0,0,0,.87); 
    text-align left;
    .user-box-item
        height 59px;
        line-height 59px;
        position relative
        display flex;
        justify-content flex-start;
        align-items center;
        overflow hidden
        .icon-logo
            width 30px;
            height 59px;
            margin-left:$mg;
            color $themecolor
            font-size 24px;
        .name
            display inline-block;
            flex 1;
            margin-left 10px;
        .icon-allow
            position absolute
            top 0;
            right 5px;
            font-size 24px;
            color #aaa;
            transform: rotate(90deg);
.user-box-setting
    .user-box-item
        .icon-logo
            color #aaa;
</style>